import { FC } from "react";
import classNames from "classnames";
import useGetComponentInfo from "../../../../../hooks/useGetComponentInfo";
import { getComponentConfByType } from "../../../../../components/QuestionComponents";


type PropsType = {
  selectedComponentId: string;
  setSelectedComponentId: (_id: string) => void;
  setSelectedComponentType: (type: string) => void;
};

const ComponentList: FC<PropsType> = (props) => {
  const {
    selectedComponentId,
    setSelectedComponentId,
    setSelectedComponentType,
  } = props;
  const { componentList } = useGetComponentInfo();

  return (
    <div className="min-h-100% bg-#fff overflow-hidden">
      {componentList
        .filter((i) => !i.isHidden) // 过滤隐藏的组件
        .map((i) => {
          const { fe_id, props, type } = i;

          const componentConf = getComponentConfByType(type);
          if (componentConf == null) return null;

          const { Component } = componentConf;

          // 拼接 class name
          const wrapperDefaultClassName =
            "m-3 b-1 b-solid b-#fff p-3 b-rd-[3px] hover-b-#d9d9d9";
          const selectedClassName = "important-b-#1890ff ";
          const wrapperClassName = classNames({
            [wrapperDefaultClassName]: true,
            [selectedClassName]: fe_id === selectedComponentId, // 是否选中
          });

          return (
            <div
              className={wrapperClassName}
              key={fe_id}
              onClick={() => {
                setSelectedComponentId(fe_id);
                setSelectedComponentType(type);
              }}
            >
              <div className="pointer-events-none opacity-80">
                <Component {...props}></Component>
              </div>
            </div>
          );
        })}
    </div>
  );
};

export default ComponentList;
